<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全部交易记录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-pink-500 to-rose-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-finance.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">全部交易记录</h1>
                <button onclick="searchTransactions()" class="text-white hover:opacity-80">
                    <i class="fas fa-search text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Filter Bar -->
        <div class="bg-white border-b border-gray-200 px-4 py-3">
            <div class="flex items-center space-x-3">
                <select id="typeFilter" onchange="filterTransactions()" class="text-xs bg-gray-100 border border-gray-200 rounded px-2 py-1">
                    <option value="">全部类型</option>
                    <option value="order-income">订单收入</option>
                    <option value="commission">平台佣金</option>
                    <option value="withdrawal">提现</option>
                    <option value="refund">退款</option>
                    <option value="promotion">推广费用</option>
                </select>
                
                <select id="timeFilter" onchange="filterTransactions()" class="text-xs bg-gray-100 border border-gray-200 rounded px-2 py-1">
                    <option value="7days">近7天</option>
                    <option value="30days" selected>近30天</option>
                    <option value="3months">近3个月</option>
                    <option value="custom">自定义</option>
                </select>
                
                <select id="amountFilter" onchange="filterTransactions()" class="text-xs bg-gray-100 border border-gray-200 rounded px-2 py-1">
                    <option value="">全部金额</option>
                    <option value="0-100">¥0-100</option>
                    <option value="100-1000">¥100-1000</option>
                    <option value="1000+">¥1000+</option>
                </select>
            </div>
        </div>

        <!-- Statistics Summary -->
        <div class="bg-white border-b border-gray-200 px-4 py-3">
            <div class="grid grid-cols-3 gap-3 text-center">
                <div>
                    <p class="text-xs text-gray-500 mb-1">总收入</p>
                    <p class="text-sm font-bold text-green-600" id="totalIncome">+¥48,956</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 mb-1">总支出</p>
                    <p class="text-sm font-bold text-red-600" id="totalExpense">-¥12,234</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 mb-1">净收益</p>
                    <p class="text-sm font-bold text-blue-600" id="netProfit">+¥36,722</p>
                </div>
            </div>
        </div>

        <!-- Transaction List -->
        <div class="h-[calc(852px-280px)] overflow-y-auto pb-24" id="transactionList">
            <!-- Date Group: 2025-01-05 -->
            <div class="transaction-group">
                <div class="bg-gray-50 px-4 py-2 border-b border-gray-100">
                    <div class="flex justify-between items-center">
                        <span class="text-xs font-medium text-gray-700">2025年01月05日</span>
                        <span class="text-xs text-gray-500">5笔交易</span>
                    </div>
                </div>
                
                <div class="bg-white divide-y divide-gray-100">
                    <!-- Transaction 1 -->
                    <div class="transaction-item p-4 cursor-pointer hover:bg-gray-50" data-type="order-income" data-amount="1298" onclick="viewTransactionDetail('TX202501051032156')">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-arrow-down text-green-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">订单收入</p>
                                    <p class="text-xs text-gray-500">订单号: 202501050156</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold text-green-600">+¥1,298</p>
                                <p class="text-xs text-gray-400">10:32</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 2 -->
                    <div class="transaction-item p-4 cursor-pointer hover:bg-gray-50" data-type="commission" data-amount="38.94" onclick="viewTransactionDetail('TX202501051032157')">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-arrow-up text-red-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">平台佣金</p>
                                    <p class="text-xs text-gray-500">费率: 3%</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold text-red-600">-¥38.94</p>
                                <p class="text-xs text-gray-400">10:32</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 3 -->
                    <div class="transaction-item p-4 cursor-pointer hover:bg-gray-50" data-type="order-income" data-amount="598" onclick="viewTransactionDetail('TX202501050945123')">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-arrow-down text-green-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">订单收入</p>
                                    <p class="text-xs text-gray-500">订单号: 202501050155</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold text-green-600">+¥598</p>
                                <p class="text-xs text-gray-400">09:45</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 4 -->
                    <div class="transaction-item p-4 cursor-pointer hover:bg-gray-50" data-type="promotion" data-amount="120" onclick="viewTransactionDetail('TX202501050830456')">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-bullhorn text-purple-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">推广费用</p>
                                    <p class="text-xs text-gray-500">直通车推广</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold text-orange-600">-¥120</p>
                                <p class="text-xs text-gray-400">08:30</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 5 -->
                    <div class="transaction-item p-4 cursor-pointer hover:bg-gray-50" data-type="order-income" data-amount="856" onclick="viewTransactionDetail('TX202501050725789')">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-arrow-down text-green-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">订单收入</p>
                                    <p class="text-xs text-gray-500">订单号: 202501050154</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold text-green-600">+¥856</p>
                                <p class="text-xs text-gray-400">07:25</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Date Group: 2025-01-04 -->
            <div class="transaction-group">
                <div class="bg-gray-50 px-4 py-2 border-b border-gray-100">
                    <div class="flex justify-between items-center">
                        <span class="text-xs font-medium text-gray-700">2025年01月04日</span>
                        <span class="text-xs text-gray-500">4笔交易</span>
                    </div>
                </div>
                
                <div class="bg-white divide-y divide-gray-100">
                    <!-- Transaction 6 -->
                    <div class="transaction-item p-4 cursor-pointer hover:bg-gray-50" data-type="withdrawal" data-amount="10000" onclick="viewTransactionDetail('TX202501041530001')">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-money-check-alt text-blue-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">提现成功</p>
                                    <p class="text-xs text-gray-500">到账: 工商银行尾号8866</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold text-blue-600">-¥10,000</p>
                                <p class="text-xs text-gray-400">15:30</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 7 -->
                    <div class="transaction-item p-4 cursor-pointer hover:bg-gray-50" data-type="order-income" data-amount="1560" onclick="viewTransactionDetail('TX202501041422234')">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-gift text-green-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">推广佣金</p>
                                    <p class="text-xs text-gray-500">下级商家分佣</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold text-green-600">+¥156</p>
                                <p class="text-xs text-gray-400">14:22</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 8 -->
                    <div class="transaction-item p-4 cursor-pointer hover:bg-gray-50" data-type="refund" data-amount="299" onclick="viewTransactionDetail('TX202501041145567')">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-undo text-yellow-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">订单退款</p>
                                    <p class="text-xs text-gray-500">订单号: 202501040123</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold text-yellow-600">-¥299</p>
                                <p class="text-xs text-gray-400">11:45</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 9 -->
                    <div class="transaction-item p-4 cursor-pointer hover:bg-gray-50" data-type="order-income" data-amount="750" onclick="viewTransactionDetail('TX202501040955890')">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-arrow-down text-green-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">订单收入</p>
                                    <p class="text-xs text-gray-500">订单号: 202501040153</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-bold text-green-600">+¥750</p>
                                <p class="text-xs text-gray-400">09:55</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Load More Button -->
            <div class="p-4 text-center">
                <button onclick="loadMoreTransactions()" class="w-full bg-white border border-gray-300 text-gray-600 py-3 rounded-lg hover:bg-gray-50 transition-colors">
                    <i class="fas fa-chevron-down mr-2"></i>加载更多交易记录
                </button>
            </div>
        </div>
    </div>

    <script>
        // Transaction management functions
        function searchTransactions() {
            const keyword = prompt('请输入搜索关键词：\n\n可搜索订单号、交易类型、金额等');
            if (keyword) {
                showToast(`正在搜索"${keyword}"...`);
                setTimeout(() => {
                    showToast('搜索功能开发中');
                }, 1000);
            }
        }

        function filterTransactions() {
            const typeFilter = document.getElementById('typeFilter').value;
            const timeFilter = document.getElementById('timeFilter').value;
            const amountFilter = document.getElementById('amountFilter').value;

            showToast('正在筛选交易记录...');
            
            // 模拟筛选逻辑
            const transactions = document.querySelectorAll('.transaction-item');
            let visibleCount = 0;
            
            transactions.forEach(item => {
                let shouldShow = true;
                
                // Type filter
                if (typeFilter && !item.dataset.type.includes(typeFilter)) {
                    shouldShow = false;
                }
                
                // Amount filter
                if (amountFilter && shouldShow) {
                    const amount = parseFloat(item.dataset.amount);
                    switch(amountFilter) {
                        case '0-100':
                            if (amount > 100) shouldShow = false;
                            break;
                        case '100-1000':
                            if (amount <= 100 || amount > 1000) shouldShow = false;
                            break;
                        case '1000+':
                            if (amount <= 1000) shouldShow = false;
                            break;
                    }
                }
                
                item.style.display = shouldShow ? 'block' : 'none';
                if (shouldShow) visibleCount++;
            });
            
            // Update group visibility
            document.querySelectorAll('.transaction-group').forEach(group => {
                const visibleItems = group.querySelectorAll('.transaction-item[style="display: block;"], .transaction-item:not([style])');
                group.style.display = visibleItems.length > 0 ? 'block' : 'none';
            });
            
            setTimeout(() => {
                showToast(`找到 ${visibleCount} 条匹配记录`);
            }, 500);
        }

        function viewTransactionDetail(transactionId) {
            // 根据交易ID的前缀确定交易类型
            let transactionType = 'order-income'; // 默认
            
            // 简单的类型判断逻辑
            const element = event.currentTarget;
            const typeText = element.querySelector('.text-sm.font-medium').textContent;
            
            if (typeText.includes('平台佣金')) {
                transactionType = 'commission';
            } else if (typeText.includes('提现')) {
                transactionType = 'withdrawal';
            } else if (typeText.includes('退款')) {
                transactionType = 'refund';
            } else if (typeText.includes('推广')) {
                transactionType = 'promotion';
            }
            
            window.location.href = `b2b-transaction-detail.html?type=${transactionType}&id=${transactionId}`;
        }

        function loadMoreTransactions() {
            showToast('正在加载更多交易记录...');
            
            // 模拟加载更多数据
            setTimeout(() => {
                showToast('已加载更多交易记录');
            }, 1000);
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('已加载全部交易记录');
        });
    </script>
</body>
</html>